import React from "react";
import {Table, Breadcrumb, Button, Input, Tag, message} from 'antd';
import CustomLayout from "../../../components/CustomLayout/customLayout";
import {
    _deleteRoleById,
    _deleteSysUser,
    _queryComUserPage,
    _queryRolePage,
    _querySysUserPage
} from "../../../utils/apiList";
import menuList from "../../../utils/staticVariable";
import AddModal from "./add";
import EditModal from "./edit";

const {Search} = Input;

class UserFramework extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabData: [],
            tabLoading: false,
            editRecord: {},
        };
        this.addModalRef = React.createRef();
        this.editModalRef = React.createRef();
    }

    componentDidMount() {
        this.loadTable()
    }

    loadTable() {
        const {pageNum, pageSize} = this.state;
        this.setState({tabLoading: true});
        _queryRolePage({pageNo: pageNum, pageSize}).then((res) => {
            if (res.data.success) {
                this.setState({
                    tabData: res.data.data.list ? res.data.data.list : [],
                    total: res.data.data.total ? res.data.data.total : [],
                    tabLoading: false,
                })
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    }

    changePageSize(pageSize, current) {
        this.setState({pageSize, pageNum: 1}, () => this.loadTable())
    }

    changePage(current) {
        this.setState({pageNum: current}, () => this.loadTable())
    }

    handleDelete = (id) => {
        _deleteRoleById({id}).then((res) => {
            if (res.data.success) {
                message.success(<b>删除成功</b>, 3);
                this.loadTable();
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    };


    render() {
        const {tabData, tabLoading, editRecord} = this.state;
        const columns = [
            {
                title: '角色名',
                dataIndex: 'role.roleName',
                key: 'role.roleName',
                width: 150,
                align: 'center'
            },
            {
                title: '权限等级',
                dataIndex: 'role.roleCode',
                key: 'role.roleCode',
                width: 120,
                align: 'center',
                render: (text, record) => (<Tag color="#2db7f5">{text}</Tag>),
            },
            {
                title: '权限关联菜单',
                dataIndex: 'menuIds',
                key: 'menuIds',
                align: 'left',
                render: (text, record) => (text ? text.map(i => {
                    return <Tag color="#f0a500" style={{marginTop: 5}}>{menuList[i]}</Tag>
                }) : null),
            },
            {
                title: '操作',
                key: 'operation',
                width: 300,
                align: 'center',
                render: (text, record) => (<div>
                    <Button style={{marginRight: 10}} type="primary"
                            onClick={() => this.editModalRef.current.showModal(record)}>修改</Button>
                    <Button style={{marginRight: 10}} type="danger"
                            onClick={() => this.handleDelete(record.role.id)}>删除</Button>
                </div>),
            },
        ];
        return (
            <CustomLayout>
                <Breadcrumb style={{margin: '16px 0'}}>
                    <Breadcrumb.Item>用户管理</Breadcrumb.Item>
                    <Breadcrumb.Item>权限架构设置</Breadcrumb.Item>
                </Breadcrumb>
                <div className={'App-Section'}>
                    <div style={{margin: 10}}>
                        <Button style={{marginRight: 10}} type="primary"
                                onClick={() => this.addModalRef.current.showModal()}>添加</Button>
                    </div>
                    <Table
                        bordered
                        rowKey={'id'}
                        loading={tabLoading}
                        columns={columns}
                        dataSource={tabData}
                        pagination={false}
                    />
                </div>
                <AddModal ref={this.addModalRef} parent={this}/>
                <EditModal ref={this.editModalRef} parent={this} editRecord={editRecord}/>
            </CustomLayout>
        );
    }
}

export default UserFramework;